<template>
  <div class="search-input">
    <nut-textarea v-model="text" placeholder="请输入要搜索的内容" />
    <div class="search-input__action">
      <div class="send-btn" @tap="onSearch">
        <image src="@/assets/icon/icon-arrow-up.png" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "search-input",
});
const emits = defineEmits(["send"]);

const text = defineModel<string>({ default: "" });

const onSearch = () => {
  emits("send");
};
</script>

<style lang="less">
.search-input {
  background: #ffffff;
  box-shadow: 0 0 20px 0 rgba(125, 125, 125, 0.1);
  border-radius: 20px;
  border: 1px solid #e9eaec;
  padding: 20px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  gap: 8px;
  .nut-textarea {
    padding: 0;
    height: 100px;
    &__textarea {
      height: 100%;
    }
  }
  &__action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .send-btn {
      width: 60px;
      height: 60px;
      background: #02c684;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      image {
        width: 48px;
        height: 48px;
      }
    }
  }
}
</style>
